<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
        }
        button {
            padding: 10px;
            margin: 5px;
            cursor: pointer;
        }
        #xhr-btn { background: #4a90e2; color: white; border: none; }
        #fetch-btn { background: #2ecc71; color: white; border: none; }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
        }
        .success { background: #d4edda; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
    <h2>用户登录</h2>
    <form id="login-form">
        <div class="form-group">
            <input type="text" id="username" placeholder="用户名" required>
            <div id="username-status"></div>
        </div>
        <div class="form-group">
            <input type="password" id="password" placeholder="密码" required>
        </div>
        
        <button type="button" id="xhr-btn">XHR登录</button>
        <button type="button" id="fetch-btn">Fetch登录</button>
    </form>

    <div id="result"></div>

    <script>
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        const xhrBtn = document.getElementById('xhr-btn');
        const fetchBtn = document.getElementById('fetch-btn');
        const resultDiv = document.getElementById('result');
        const usernameStatus = document.getElementById('username-status');

        // 监听输入
        username.addEventListener('input', (e) => {
            usernameStatus.textContent = `输入中: ${e.target.value}`;
        });

        // XMLHttpRequest登录
        xhrBtn.addEventListener('click', () => {
            if (!validateForm()) return;
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                showResult('XHR登录成功!', true);
            };
            
            xhr.onerror = function() {
                showResult('XHR登录失败!', false);
            };
            
            xhr.send(JSON.stringify({
                username: username.value,
                password: password.value
            }));
        });

        // Fetch登录
        fetchBtn.addEventListener('click', async () => {
            if (!validateForm()) return;
            
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: username.value,
                        password: password.value
                    })
                });
                
                if (response.ok) {
                    showResult('Fetch登录成功!', true);
                } else {
                    showResult('Fetch登录失败!', false);
                }
            } catch (error) {
                showResult('Fetch请求出错!', false);
            }
        });

        function validateForm() {
            if (!username.value || !password.value) {
                alert('请填写用户名和密码');
                return false;
            }
            return true;
        }

        function showResult(message, isSuccess) {
            resultDiv.textContent = message;
            resultDiv.className = isSuccess ? 'result success' : 'result error';
        }
    </script>
</body>
</html>